<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单标签</title>
  </head>
  <body>
    <!-- form 就是一个容器 -->
    <form action="">
      <!-- 
        input
        通过type 设置不同外观 和 功能 
        -->
      <div>
        <!-- text类型， 文本输入 -->
        <input type="text" placeholder="输入用户名" />
      </div>
      <div>
        <!-- 密码类型 -->
        <input type="password" placeholder="请输入密码" />
      </div>
      <div>
        <!-- radio - 单选框， name 确定分组 -> 不能重复选择 , id -> 指定关联-->
        <input type="radio" name="male" id="boy" />
        <!-- label for 关联指定标签的id 属性， 实现点字等于点选择框 -->
        <label for="boy"> 男</label>
        <input type="radio" name="male" id="girl" />
        <label for="girl">女</label>
        <input type="radio" name="male" id="screct" />
        <label for="screct">保密</label>
      </div>
      <div>
        <h3>兴趣爱好</h3>
      </div>
      <div>
        <!-- checkbox 复选框 -->
         <!-- value - 获取到的是数据 -->
          <!-- label 中放置的是给用户看的数据 -->
        <input type="checkbox" id="sing" value="1" />
        <label for="sing">唱</label>
        <input type="checkbox" id="dance" value="2" />
        <label for="dance">跳</label>
        <input type="checkbox" id="rap" value="3" />
        <label for="rap">rap</label>
        <input type="checkbox" id="basketball" value="4" />
        <label for="basketball">篮球</label>
      </div>
      <!-- 文本域 -->
      <div>
        <h3>文本域输入个性签名</h3>
      </div>
      <div>
        <textarea placeholder="个性签名" name="" id=""></textarea>
      </div>
      <div>
        <!--  按钮
        type 设置按钮的类型
        submit - 提交 (默认)  可以结合 form 表单 提交数据到指定的url 地址，数据如果需要提交
                 需要给表单元素 设置name属性， 相当于key
        reset  - 重置表单， 重置的是， 所在form 标签内部的元素

        -->
        <button type="submit">提交</button>
        <button type="reset">重置</button>
      </div>
    </form>

    <!-- 自己定义一个搜索引擎 -->
    <h1>度百</h1>
    <form action="https://www.baidu.com/s">
      <div>
        <textarea placeholder="输入内容" name="wd"></textarea>
      </div>
      <div>
        <button type="submit">提交</button>
      </div>
    </form>

    <!-- 搜狗 -->
    <h1>狗搜搜索</h1>
    <form action="https://www.sogou.com/web">
      <input type="text" name="query" id="" />
      <button type="submit">开始搜索</button>
    </form>
  </body>
</html>
